<template>
  <div>
    <h2>竞赛参与情况</h2>
    <el-table :data="competitionData" style="width: 100%">
      <el-table-column label="竞赛名称" prop="name"></el-table-column>

      <el-table-column
          label="开始日期"
          prop="startDate"
          :formatter="formatDate">
      </el-table-column>
      <el-table-column
          label="结束日期"
          prop="endDate"
          :formatter="formatDate">
      </el-table-column>
      <el-table-column label="获奖" prop="awards"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      competitionData: [] // 存储竞赛数据
    };
  },
  created() {
    this.fetchCompetitionData();
  },
  methods: {
    // 获取竞赛数据
    fetchCompetitionData() {
      const userData = JSON.parse(localStorage.getItem('honey-user')); // 获取存储的用户信息
      if (userData && userData.name) {
        const studentName = userData.name; // 获取学生姓名
        this.$axios
            .get(`/student-competition/list?studentName=${studentName}`) // 请求后端
            .then(response => {
              console.log('竞赛数据:', response.data); // 调试：打印返回数据
              if (response.data && response.data.code === 200) {
                this.competitionData = response.data.data || []; // 确保数据正确赋值
              } else {
                this.$message.error('未能获取竞赛数据');
              }
            })
            .catch(error => {
              console.error('获取竞赛数据失败', error);
              this.$message.error('获取竞赛数据失败');
            });
      } else {
        this.$message.error('未找到学生信息');
      }
    },
    // 格式化日期
    formatDate(row, column, cellValue) {
      if (!cellValue) return '暂无数据';
      const date = new Date(cellValue);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    }
  }
};
</script>

<style scoped>
h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>
